<template>
  <div>
    <!--  返回按钮-->
    <div>
      <van-nav-bar
          title="附近门店"
          left-text="返回"
          left-arrow
          @click-left="back()"
      />
    </div>
    <div id="dvmap">
    </div>
    <div>
      <button @click="dw()">定位</button>
      <button @click="hq()">画圈</button>
      <button @click="fj()">附近的门店</button>
      <div>
        <p>经度：{{ near.lng }}</p>
        <p>纬度：{{ near.lat }}</p>
      </div>
    </div>
  </div>
</template>

<script>
var map;
export default {
  name: "MapView",
  data() {
    return {
      point: {},
      near: {
        name: "总店",
        lat: 34.771889,
        lng: 113.643422
      }
    }
  },
  mounted() {
    map = new BMap.Map("dvmap");
    // 创建地图实例
    this.point = new BMap.Point(113.63141921, 34.75343885);
    // 创建点坐标
    map.centerAndZoom(this.point, 13);
    var marker = new BMap.Marker(this.point);        // 创建标注
    map.addOverlay(marker);                     // 将标注添加到地图中
    //地图 添加点击事件
    map.addEventListener("click", (e) => {
      console.log(e.point.lng + ", " + e.point.lat);
      this.near.lat = e.point.lat;
      this.near.lng = e.point.lng;
    });
  }, methods: {
    back() {
      this.$router.push("/home");
    },
    dw() {
      //定位
      var geolocation = new BMap.Geolocation();
      var that = this;
      geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          var mk = new BMap.Marker(r.point);
          map.addOverlay(mk);
          map.panTo(r.point);
          that.point = r.point;
          // alert('您的位置：'+r.point.lng+','+r.point.lat);
        } else {
          alert('failed' + this.getStatus());
        }
      });
    },
    hq() {
      //绘制圆
      var circle = new BMap.Circle(
          this.point,
          3000,
          {strokeColor: "red", strokeWeight: 1, strokeOpacity: 0.8, fillOpacity: 0.1}
      );
      map.addOverlay(circle);
    },
    fj() {
      //实现附近的人的查询
      var obj = {
        lat: this.point.lat,
        lng: this.point.lng,
        name: this.near.name,
        radius: 3000
      }
      this.axios.post("/near/search.do", obj).then((r) => {
        if (r.data.code == 200) {
          for (let i = 0; i < r.data.data.length; i++) {
            var p = new BMap.Point(r.data.data[i].lng, r.data.data[i].lat);
            var marker = new BMap.Marker(p);        // 创建标注
            map.addOverlay(marker);
            marker.addEventListener("click", function () {
              alert(r.data.data[i].name + ",距离您" + r.data.data[i].dist + "m");
            });// 将标注添加到地图中
          }
        }
      })
    }
  }
}
</script>

<style scoped>
#dvmap {
  width: 100%;
  height: 500px;
}
</style>